<template>
  <div class="inspection">
    <div class="inspection-item">
      <div class="item-title">{{ titleMap[0] }}</div>
      <check-list
        class="check-scroll customScrollBar"
        :options="options1"
        :checked="checked1"
        :isShowCheck="isDetail"
        :level="1"
        @changeChecked="changeChecked"
      ></check-list>
    </div>
    <div class="inspection-item">
      <div class="item-title">{{ titleMap[1] }}</div>
      <check-list
        class="check-scroll customScrollBar"
        :options="options2"
        :checked="checked2"
        :isShowCheck="isDetail"
        :level="2"
        @changeChecked="changeChecked"
      ></check-list>
    </div>
    <div class="inspection-item">
      <div class="item-title">{{ titleMap[2] }}</div>
      <check-list
        class="check-scroll customScrollBar"
        :options="options3"
        :checked="checked3"
        :isShowCheckAll="false"
        :isShowCheck="isDetail"
        :level="3"
        @changeChecked="changeChecked"
      ></check-list>
    </div>
  </div>
</template>

<script>
import checkList from './checkList';
export default {
  name: 'inspection',
  data() {
    return {
      // options1: [{label: '轿厢',value:'轿厢' }, {label: '轿顶',value:'轿顶' }, {label: '轿顶1',value:'轿顶1' }, {label: '轿顶2',value:'轿顶2' }, {label: '轿顶3',value:'轿顶3' }, {label: '轿顶4',value:'轿顶4' }, {label: '轿顶5',value:'轿顶5' }, {label: '轿顶6',value:'轿顶6' }, {label: '轿顶7',value:'轿顶7' }, {label: '轿顶',value:'轿顶' }, {label: '轿顶',value:'轿顶' }, {label: '轿顶',value:'轿顶' }, {label: '轿顶',value:'轿顶' }],
      // checked1: [],
      // options2: [{label: '滚轮',value:'滚轮' }, {label: '控制柜',value:'控制柜' }],
      // checked2: [],
      // options3: [
      //   {label: '靴衬内线',value:'靴衬内线',status: 0, detailShow:false },
      //   {label: '靴衬外线',value:'靴衬外线',status: 0, detailShow:false},
      //   {label: '层衬',value:'层衬',status: 1,img:'/contract/2023/12/14/1702543544040.jpeg,/contract/2023/12/14/1702543544040.jpeg,/contract/2023/12/14/1702543544040.jpeg,/contract/2023/12/14/1702543544040.jpeg', detailShow:false},
      //   {label: '层衬1',value:'层衬1',status: 1,img:'/contract/2023/12/14/1702543544040.jpeg,/contract/2023/12/14/1702543544040.jpeg,/contract/2023/12/14/1702543544040.jpeg,/contract/2023/12/14/1702543544040.jpeg', detailShow:false}
      // ],
      // checked3: [],
      options1: [],
      checked1: [],
      options2: [],
      checked2: [],
      options3: [],
      checked3: [],
      isDetail: true,
      data: [
        
      ]
    };
  },
  props: {
    titleMap: {
      type: Array,
      default: () => ['一级巡检项目', '二级巡检项目', '三级巡检项目']
    }
  },
  components: {
    checkList
  },
  methods: {
    handelData(data) {
      for (let i = 0; i < data.length; i++) {
        this['options' + Number(data[i].level)].push({
          ...data[i]
        });
        if (data[i].children.length) {
          this.handelData(data[i].children);
        }
      }
    },
    show(val) {
      // this.options1=[]
      // this.options2=[]
      // this.options3=[]
      this.checked1=[]
      this.checked2=[]
      this.checked3=[]
      // this.$set( this.data, checked, false )
      this.isDetail = val == 'detail' ? false : true;
      this.isDetail ? (this.options1 = this.data) : this.handelData(this.data);
    },
    changeChecked(val, level) {
      if (level == 1) {
        this.options2 = [];
        this.options3 = [];
        this.checked1 = val;
      } else if (level == 2) {
        this.options3 = [];
        this.checked2 = val;
      } else if (level == 3) {
        this.checked3 = val;
      }
      this.getData(val);
      if (level == 1) {
        var options3 = []; //点击第一级，第三级数据加载
        for (let i = 0; i < val.length; i++) {
          for (let j = 0; j < val[i].children.length; j++) {
            for (let x = 0; x < this.checked2.length; x++) {
              if (val[i].children[j].id == this.checked2[x].id) {
                options3.push(this.checked2[x]);
              }
            }
          }
        }
        this.getData(options3);
      }
    },
    getData(val, level) {
      for (let i = 0; i < val.length; i++) {
        for (let j = 0; j < val[i].children.length; j++) {
          this['options' + Number(val[i].children[j].level)].push({
            ...val[i].children[j]
          });
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.inspection {
  display: flex;
  height: 100%;
}
.inspection-item {
  width: 33%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 30px 20px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.item-title {
  text-align: center;
  margin-bottom: 20px;
}
.check-scroll {
  overflow-y: auto;
  flex: 1 1 auto;
}
.customScrollBar {
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }

  &::-webkit-scrollbar-track-piece {
    background: rgba(200, 200, 200, 0.1);
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 8px;
    background: rgba(200, 200, 200, 0.5);
  }
}
</style>
<style>
.el-theme1 .inspection .el-checkbox {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding-left: 30px;
  margin-right: 0;
  display: flex;
  align-items: center;
}
</style>
